/* 
    声名字符串格式
    */

/* 
    @charset "UTF-8:
*/
@charset "UTF-8";

//双斜杠在编译成css后就不生成

/* 
    生成变量  @ 必须以;分号结束
    1、不能以数字开头
    
*/

@className: .box;

@mainColor: #eee;

a:hover {
    color:@mainColor;
}

div{
    color:@mainColor;
}

/* 
    类名xu
*/

@{className} {
    color:@mainColor;
}

/* 
    mixins 混入
*/

/* 
    类混入
*/

.main {
    display: flex;
}
.box {
    flex: 1;
    color: black;
}
.main-box{
    .main();
    .box();
}
/* 
    函数混入
*/

/* 定义函数 */

.mainClass(){
    display: flex;
    height: 100px;
    width: 100%;
}
.boxClass() {
    flex: 1;
    width: 100%;
    height: 100%;
}
.main-boxClss{
    .mainClass();
    .boxClass();
}
.boxSizeFlex(@flex:flex,@height:100%,@width:100%) {
    border: 1px solid rgba(241, 9, 9, 1);
    display: flex;
    height: @height;
    width: @width;
    
}
/* 
    定义了参数，在调用的时候必须传参。没有默认值就会报错
    怎么定义默认值 和定义变量时一样的
*/
.flexbox (@isFlex:flex,@flexDirection:row,@alignContent:unset){
    flex-direction: @flexDirection;
    align-content: @alignContent;
    display: @isFlex;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(1, 1, 1, 1);
}
.box{
    .flexbox();
    height: 100px;
    position: relative;
}
.centerAuto(@left:-50%,@top:-50%){
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(@left,@top)
}
.box_inside {
    .boxSizeFlex(flex,50%,50%);
    .centerAuto()
}

/* 
    嵌套。伪元素伪类选择器。
*/
.box {
    display: inline;
    &:hover {
        img {
            height: 100px;
            width: 100px;

        }
    }
}

/* 
    内置函数
    运算
*/
/* 
    less可用于图片的调整
*/
@num:5;
ul {
    width: 100%*@num;
    li{
        width: 100%/@num;
        /* 颜色的加减 */
        color: rgba(241, 9, 9, 1) + rgba(1, 1, 1, 1);
        background: gray * 0.2;
        /* 内置函数 调节亮度 */
        border: 100px solid lighten(red, 10%); ;
    }
}